<template>
    <Page>
        <div class="search"></div>
        <div class="datalist">
            <div class="table-header">
                <div class="table-header-left">
                    <el-button type="primary" @click="$refs.create.openDialog()" plain size="small">新增子管理员</el-button>
                </div>
                <div class="table-header-right"></div>
            </div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="userId" label="序号" align="center"></el-table-column>
                    <el-table-column prop="fullName" label="姓名" align="center"></el-table-column>
                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
                    <el-table-column prop="role" label="角色" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" align="center">
                        <template slot-scope="scope">
                            <span>{{statusList[scope.row.status]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="$refs.update.openDialog(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="$refs.passwd.openDialog(scope.row)">重置密码</el-button>
                            <el-button type="text" size="small" @click="stopAdmin(scope.row)">{{scope.row.status == 0 ? '停用' : '启用'}}</el-button>
                            <el-button type="text" size="small" @click="$refs.passwd.openDialog(scope.row)">重置密码</el-button>
                            <el-button type="text" size="small" v-if="scope.row.loginName != 'admin'" @click="delAdmin(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
        <Create ref="create" @refersh="initData"></Create>
        <Update ref="update" @refersh="initData"></Update>
        <Password ref="passwd" @refersh="initData"></Password>
    </Page>
</template>
<script>
import Page from "@/components/page/Page";
import Create from "./page/create";
import Update from "./page/update";
import Password from "./page/password"
export default {
    data(){
        return {
            params:{
                currPage:1,
                pageSize:25
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            },
            statusList:['正常','禁用'],
        }
    },
    mounted() {
        this.initData();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/sysuser/list', {params:this.params}).then(result => {
                if(result.code == 200){
                    this.listData.list = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 编辑管理员
        stopAdmin(item){
            this.$confirm('确认要执行该操作吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal:false,
            }).then(result => {
                this.$http.post('/api/sysuser/status', {userId:item.userId}).then(result => {
                    if (result.code == 200){
                        this.$message.success(result.msg);
                        this.initData();
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            });
        },
        // 删除管理员
        delAdmin(item){
            this.$confirm('确认要执行该操作吗？', '系统提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                closeOnClickModal:false,
            }).then(result => {
                this.$http.post('/api/sysuser/delete', {userId:item.userId}).then(result => {
                    if(result.code == 200){
                        this.$message.success({
                            message:result.msg,
                        });
                        this.initData();
                    }else{
                        this.$message.error(result.msg);
                    }
                });
            });
        },
        // 分页点击
        changePage(e){
            this.params.currPage = e;
            this.initData();
        },
    },
    components:{
        Page,
        Create,
        Update,
        Password,
    }
}
</script>
<style lang="less" scoped>
    .page{

    }
</style>
